{% extends "topnav.html"%}

{% block title %}
结付录入
{% endblock %}

<body>
{% block body %}
<div class="container-fluid ">
    <div class="col-sm-3">
        <div class="menus">
            <div class="item">
                <div class="header" onclick="clickMe(this);">结付管理</div>
                <div class="content hide">
                    <a href="{{url_for('sm.insert')}}">--结付录入</a>
                    <a href="{{url_for('sm.query')}}">--结付支付</a>
                    <a>--使用说明</a>
                </div>
            </div>
            <div class="item">
                <div class="header" onclick="clickMe(this);">信息与沟通</div>
                <div class="content hide">
                    <a>--查询分析</a>
                    <a>--公告通知</a>
                    <a>--系统说明</a>
                    <a>--数据导出</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-9">
        <div class="panel panel-info">
            <div class="panel-heading">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                结算单处理区域
            </div>
            <div class="panel-body">
                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                    新增商户营业额结付单
                </button>
                {% for message in get_flashed_messages() %}
                {{ message }}
                {% endfor %}
            </div>

        </div>
        <div class="panel panel-info">
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                待提交商户结算单列表
            </div>
            <div class="panel-body">
                注意: 以下内容是已经暂存还没有提交审核的商户结付单
            </div>
            <div>
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>结付单号</th>
                        <th>商户号</th>
                        <th>商户名称</th>
                        <th>开始日期</th>
                        <th>结束日期</th>
                        <th>结付金额</th>
                        <th>单据状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {%for statement in statements%}
                    <tr>
                        <td>{{statement.id}}</td>
                        <td>{{statement.merchant_id}}</td>
                        <td>{{statement.merchants.wechat_name}}</td>
                        <td>{{statement.since}}</td>
                        <td>{{statement.till}}</td>
                        <td>{{statement.statement_amount}}</td>
                        <td>{{statement.status}}</td>
                        <td>
                            <a class="btn btn-primary btn-xs"
                               href="{{url_for('sm.submit',statement_id=statement.id)}}">提交</a>
                            <a class="btn btn-danger btn-xs"
                               href="{{url_for('sm.delete',statement_id=statement.id)}}">删除</a>
                        </td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="panel panel-info">
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                已提交商户结算单列表
            </div>
            <div class="panel-body">
                注意: 以下内容是已经提交审核的商户结付单
            </div>
            <div>
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>结付单号</th>
                        <th>商户号</th>
                        <th>商户名称</th>
                        <th>开始日期</th>
                        <th>结束日期</th>
                        <th>结付金额</th>
                        <th>单据状态</th>
                    </tr>
                    </thead>
                    <tbody>
                    {%for submitted_statement in submitted_statements%}
                    <tr>
                        <td>{{submitted_statement.id}}</td>
                        <td>{{submitted_statement.merchant_id}}</td>
                        <td>{{submitted_statement.merchants.wechat_name}}</td>
                        <td>{{submitted_statement.since}}</td>
                        <td>{{submitted_statement.till}}</td>
                        <td>{{submitted_statement.statement_amount}}</td>
                        <td>{{submitted_statement.status}}</td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h3 class="modal-title" id="gridSystemModalLabel">商户营业额结付单</h3>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <form method="post" action="/sm/insert">
                            {{ form.csrf_token() }}
                            <div class="row">
                                <div class="col-xs-6">
                                    <label>{{form.merchant_id.label}}：</label>
                                    <select class="form-control" name="merchant_id">
                                        {% for merchant in merchants %}
                                        <option value='{{merchant.id}},{{merchant.wechat_name}},{{merchant.zhenyuan_name}},
                                                           {{merchant.account_name}},{{merchant.account_no}},{{merchant.bank_name}}'>
                                            {{merchant.id}}.{{merchant.wechat_name}},{{merchant.zhenyuan_name}},
                                            {{merchant.account_name}},{{merchant.account_no}},{{merchant.bank_name}}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3">
                                    <label>{{form.since.label}}：</label><input type="date" name="since">
                                </div>
                                <div class="col-xs-3">
                                    <label>{{form.till.label}}：</label><input type="date" name="till">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <label>{{form.zhenyuan_amount.label}}：</label><input type="text"
                                                                                         name="zhenyuan_amount"
                                                                                         placeholder="请输入该期间一卡通刷卡金额"
                                                                                         onChange="d.value=parseFloat(zhenyuan_amount.value)+parseFloat(wechat_amount.value)-parseFloat(c.value);">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <label>+{{form.wechat_amount.label}}：</label><input type="text" name="wechat_amount"
                                                                                        placeholder="请输入该期间电子校园卡金额"
                                                                                        onChange="statement_amount.value=parseFloat(zhenyuan_amount.value)+parseFloat(wechat_amount.value)-parseFloat(service_fee.value);">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-8">
                                    <label>-{{form.service_fee.label}}：</label><input type="text" name="service_fee"
                                                                                      placeholder="请输入该期间系统维护管理费"
                                                                                      onChange="statement_amount.value=parseFloat(zhenyuan_amount.value)+parseFloat(wechat_amount.value)-parseFloat(service_fee.value);">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <label>={{form.statement_amount.label}}：</label><input type="text"
                                                                                           name="statement_amount"
                                                                                           onChange="statement_amount.value=parseFloat(zhenyuan_amount.value)+parseFloat(wechat_amount.value)-parseFloat(service_fee.value);"
                                                                                           placeholder="自动计算期间结算金额"
                                                                                           readonly>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="modal-footer">
                                        <button type="button" class="btn-warning" data-dismiss="modal">取消</button>
                                        <input type="submit" class="btn-primary" value="保存">
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


    <div class="modal fade" id="process" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h3 class="modal-title" id="process_this_settlement">处理商户营业额结付单</h3>
                </div>
                <div class="modal-body">
                    <div class="modal-footer">
                        <button type="button" class="btn-warning" data-dismiss="modal">取消</button>
                        <input type="submit" class="btn-primary" value="保存">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../static/js/jquery-3.7.0.min.js"></script>
    <script src="../static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        function clickMe(self) {
            var hasHide = $(self).next().hasClass("hide");
            if (hasHide) {
                $(self).next().removeClass("hide");
            } else {
                $(self).next().addClass("hide");
            }
        }
    </script>

    <script>
        var currentTime = new Date();
        var year = currentTime.getFullYear();
        var month = (currentTime.getMonth() + 1).toString().padStart(2, '0');
        var date = currentTime.getDate().toString().padStart(2, '0');
        var hour = currentTime.getHours().toString().padStart(2, '0');
        var minute = currentTime.getMinutes().toString().padStart(2, '0');

        var defaultValue = year + '-' + month + '-' + date + 'T' + hour + ':' + minute;
        document.getElementById("input_time").value = defaultValue;
    </script>

    {% endblock %}
</div>
</body>

